<!-- 品牌制造商直供-->


<template>
  <div>
    <ul class="product_list">
      <li
        v-for="item in goodListArr"
        :key="item.id"
        @click="gotoDetailFn(item.id)"
      >
        <img :src="item.list_pic_url" alt="" />
        <h5>{{ item.name }}</h5>
        <h6>{{ item.retail_price | Rmb }}</h6>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["goodListArr"], //search父组件传回来的商品数组
  methods: {
    gotoDetailFn(id) {
      console.log(id); //id是当前商品的id
      this.$router.push({ pash: "/details", query: { id } });
      // console.log(this.$route); //当前search子路由
      // console.log(this.$router);//当前路由实例对象
    },
  },
};
</script>

<style lang='less' scoped>
h4 {
  text-align: center;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
}
.product_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  li {
    width: 49%;
    position: relative;
    background: #fff;
    text-align: center;

    padding-bottom: 10px;
    img {
      width: 100%;
      display: block;
    }
    h5 {
      top: 10px;
      left: 8px;
      font-size: 15px;
    }
    h6 {
      top: 40px;
      left: 8px;
      color: #a04548;
      font-size: 15px;
    }
  }
}
</style>